<template>
  <span :id="id">
    <slot></slot>
  </span>
</template>
<script>
import { annotate } from 'rough-notation';

export default {
  props:{
    type: {
      //类型：underline（下划线）、box（方框）、circle（圆圈）、highlight（高亮）、crossed-off（删除线）、bracket（括号）
      default: "underline",
    },
    color: {
      default: "blue",
    },
    // multiline: {
    //   default: true,
    // },
    animationDuration:{
      default: 1000
    },
    strokeWidth:{
      default: 2
    },
    animate:{
      default: true
    },
    padding:{
      default: 2
    },
    brackets:{
      default: ['left','right']
    },
    multiline:{
      default: false
    },

  },
  data(){
    return{
      id:85212
    }
  },
  mounted() {
    this.id = this.$ok.tool.create_uuid();
    this.$nextTick(()=>{
      let id = document.getElementById(this.id);
      this.createNotation(id)
    })
  },
  methods: {
    createNotation(doc){
      let notation = new annotate(doc,{
        type: this.type,
        color: this.color,
        strokeWidth:this.strokeWidth,
        animationDuration:this.animationDuration,
        animate: this.animate,
        padding:this.padding,
        brackets:this.brackets,
        multiline:this.multiline
      });
      notation.show();
    }
  }
}
</script>
